<template>
  <div class="workflow-nodes">
    <div class="nodes-title">节点组件</div>
    <div class="nodes-list">
      <div v-for="(category, index) in nodeCategory" :key="index">
        <div class="category-title">{{ category.name }}</div>
        <div class="category-nodes">
          <div v-for="(node, index) in category.nodes" :key="index" class="category-node">
            <el-button type="primary" size="mini">{{ node.value }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "WorkflowNodes",
  data() {
    return {
      OP_OPTIONS: [],
      nodeCategory: [
        {
          name: "控制节点",
          nodes: [
            {
              value: "START",
              label: "Start"
            },
            {
              value: "END",
              label: "End"
            }
          ]
        },
        {
          name: "作业节点",
          nodes: []
        }
      ]
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.$http.task.getTaskTypes().then(res => {
        this.nodeCategory[1].nodes = res;
      });
    }
  }
};
</script>
<style lang="scss">
.workflow-nodes {
  position: absolute;
  min-height: 400px;
  left: 15px;
  top: 60px;
  bottom: 10px;
  border: 1px solid #e4e7ed;
  padding: 0 12px;
  .nodes-list {
    width: 120px;
  }
  .nodes-title {
    padding: 4px 0;
    text-align: center;
    border-bottom: 1px solid #e4e7ed;
    margin: 0 -12px;
  }
  .category-title {
    margin-top: 4px;
    padding: 4px;
    text-align: center;
  }
  .category-node {
    padding: 4px 0;
    .el-button {
      width: 100%;
    }
  }
}
</style>
